Ext.onReady(function() {
    
    /**
     * ExtJS的图表使用跟表格差不多，过程也差不多，只是需要 axes画轴 和 series画数据
     */
    
    var mproxy = Ext.create('Ext.data.proxy.Ajax', {
	url: "/QuickLifeServer/WebCouponStatisticAction",
	timeout: 20000,
	totalParam: "total",
	extraParams: {
	    rqinfos: Ext.getDom("id").value
	},
	reader: {
	    type: "json",
	    idProperty: 'id',
	    root: "rtinfos"
	}
    });
    
    // 数据集
    var sto = Ext.create('Ext.data.JsonStore', {
	fields: ['name', 'uses'],
	proxy: mproxy
    });
    
    sto.load();
    
    // 创建图表 
    Ext.create('Ext.chart.Chart', {
	xtype: 'chart',
	renderTo: Ext.getBody(),
	width: window.innerWidth,
	height: window.innerHeight,
	theme: 'Base:gradients',
	animate: true,
	store: sto,
	insetPadding: 60,
	legend: {
	    position: 'right'
	},
	// 图形绘制
	series: [
	          {
	              type: 'pie',
	              //axis: 'left',
	              showInLegend: true,
	              angleField: 'uses',
	              donut: true,
	              tips: {
	        	  trackMouse: true,
	        	  width: 130,
	        	  height: 20,
	        	  renderer: function(storeItem, item) {
	        	      this.setTitle(' 被使用：' + (storeItem.get('uses') - 10) + " 次" );
	        	  }
	              },
	              highlight: {
	        	 segment: {
	        	     margin: 20
	        	 } 
	              },
	              label: {
	        	  display: 'rotate',
	        	  field: 'name',
	        	  font: '18px Arial',
	        	  contrast: true,
	              },
	              xField: 'name'
	          }
	          ]
    });
});